<template>
  <div class="management">
    <van-nav-bar
      title="成员管理"
      left-arrow
      @click-left="goBackHandle"
      @click-right="goDown"
      :fixed="true"
      :border="false"
      :safe-area-inset-top="true"
      style="padding-top: 0px"
    >
      <template #right>
        <span style="color: #006dff; font-size: 16px; margin-top: 2px"
          >模板</span
        >
        <van-icon
          name="back-top"
          size="20"
          color="#006dff"
          style="transform: rotate(180deg)"
        />
      </template>
    </van-nav-bar>
    <div class="dataContent">
      <div class="contentTop"></div>
      <van-loading size="30px" vertical v-if="Loading"> 加载中.. </van-loading>
      <div
        class="content"
        v-for="(item, index) in List"
        :key="index"
        @click="clickList(item)"
      >
        <van-icon name="user-circle-o" size="16" v-if="item.member" />
        <van-icon name="peer-pay" size="16" v-if="item.DeptId" />
        <span>{{ item.member }}</span>
        <span>{{ item.DeptName }}</span>
      </div>
    </div>
    <div class="footerDiv" v-if="role == 2"></div>
    <div class="footer" v-if="role == 2">
      <van-button type="default" @click="click(1)">添加成员</van-button>
      <van-button type="default" @click="click(2)">导入成员</van-button>
      <van-button
        type="default"
        @click="click(3)"
        v-if="deptId == '1615586587184205824'"
        >添加部门</van-button
      >
    </div>
    <van-dialog
      v-model="show"
      title="添加部门"
      show-cancel-button
      @confirm="confirm"
      confirm-button-color="#006dff"
    >
      <van-cell-group>
        <van-field
          v-model="value"
          placeholder="请输入部门名称"
          clearable
          autocomplete="off"
        />
      </van-cell-group>
    </van-dialog>
  </div>
</template>
<script>
import { SuccesFN, FailFN } from '@/DceMessage'
import backMixin from '@/backMixin'
export default {
  name: 'management',
  mixins: [backMixin],
  data() {
    return {
      List: [],
      show: false,
      value: '',
      memberId: '',
      pageSize: 20,
      page: 1,
      role: '',
      deptHead: '',
      deptHeadId: '',
      Loading: true,
      deptId: ''
    }
  },
  created() {
    // if (window.localStorage.getItem('deptHead')) {
    //从缓存中获取部门负责人名称
    // this.deptHead = JSON.parse(
    //   window.localStorage.getItem('deptHead')
    // ).deptHead
    // //从缓存中获取部门负责人Id
    // this.deptHeadId = JSON.parse(
    //   window.localStorage.getItem('deptHead')
    // ).deptHeadId
    // }
    //从缓存中获取权限
    this.role = JSON.parse(
      window.localStorage.getItem('attendance-records')
    ).role
    //从缓存中获取部门id
    this.deptId = JSON.parse(
      window.localStorage.getItem('attendance-records')
    ).deptId
  },
  mounted() {
    this.getManagement() //获取部门信息
  },
  methods: {
    // 下载
    goDown() {
      setTimeout(() => {
        SuccesFN('下载完成')
      }, 300)
      window.location.href =
        'https://fipdev.dfitc.com.cn/pages/download/template.xlsx'
    },
    // 获取部门信息
    getManagement() {
      this.$axios({
        url: '/attendance-api/department-query-list',
        method: 'get',
        params: {
          pageSize: 0,
          page: 1
        }
      }).then(res => {
        console.log(res)

        let temp = res.data.Object.List
        let tempDept = window.localStorage.getItem('attendance-records')
        let tempDeptId = JSON.parse(tempDept).deptId
        // 如果部门是-1 那么就是全部
        if (tempDeptId == '1615586587184205824') {
          this.List = temp.filter(item => {
            return item.DeptId != tempDeptId
          })
        } else {
          this.List = temp.filter(item => {
            return item.DeptId == tempDeptId
          })
        }
        // if (this.List) {
        //   this.List.forEach((value, index) => {
        //     value['DeptHead'] = this.deptHead
        //     value['DeptHeadId'] = this.deptHeadId
        //   })
        // window.localStorage.removeItem('deptHead')
        // }
        this.Loading = false
      })
    },
    // 点击dialog的确认按钮
    confirm() {
      this.show = false
      let aaa = this.List.filter(item => item.DeptName == this.value)
      console.log(aaa)
      if (aaa.length == 0) {
        console.log('进')
        this.$axios({
          url: '/attendance-api/department-add',
          method: 'POST',
          data: {
            deptName: this.value
          }
        }).then(res => {
          if (res) {
            SuccesFN(res.data.Message)
            this.getManagement()
            // window.localStorage.setItem('ifAddDept', 1)
          }
        })
      } else {
        FailFN('该部门已存在')
        // this.$toast('该部门已存在')
      }
    },
    // 点击返回按钮
    goBackHandle() {
      this.$router.go(-1)
    },
    clickList(val) {
      console.log(val)
      if (val.member) {
        // 跳转到编辑成员页面
        this.$router.push({
          name: 'addMember',
          params: {
            ifNewMember: false
          }
        })
      } else if (val.DeptId) {
        // 跳转到部门成员页面
        this.$router.push({
          name: 'memberList',
          params: {
            DeptName: val.DeptName,
            DeptId: val.DeptId
          }
        })
      }
    },
    // 点击底部按钮
    click(val) {
      if (val == 1) {
        // 点击添加成员，跳转页面
        this.$router.push({
          name: 'addMember',
          params: {
            ifNewMember: true,
            List: this.List
          }
        })
      } else if (val == 2) {
        // 点击导入成员，跳转页面
        this.$router.push('/importingMembers')
      } else if (val == 3) {
        // 添加部门,页面弹窗
        console.log('点击添加部门')
        this.show = true
        this.value = ''
      }
    }
  }
}
</script>
<style lang="less" scoped>
.management:deep {
  margin: 0;
  padding: 0;
  text-align: left;
  height: 100%;
  overflow: auto;
  .van-nav-bar__arrow {
    font-size: 18px;
    color: #000;
  }
  .van-nav-bar__content {
    .van-nav-bar__title {
      font-size: 18px;
    }
  }
  .dataContent {
    // background-color: #f5f5f5;
    .contentTop {
      margin-top: 56px;
    }
    .van-loading {
      margin-top: 200px;
      text-align: center;
      z-index: 300;
    }
    .content {
      padding: 10px 0;
      margin: 0 16px;
      border-bottom: 1px solid #ddd;
      .van-icon {
        margin-right: 10px;
      }
    }
    .content:last-child {
      border: 0;
    }
  }
  .footerDiv {
    height: 64px;
  }
  .footer {
    height: 64px;
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
    background-color: #fff;
    .van-button {
      flex: 1;
      margin: 10px 16px;
      // background: #006eff25;
      background: #e3efff;
      color: #006dff;
      font-size: 16px;
      border-radius: 10px;
      border: 0;
    }
    .van-button:nth-child(2) {
      margin-left: 0;
    }
    .van-button:last-child {
      margin-left: 0;
      background-color: #006dff;
      color: #fff;
    }
  }
}
</style>
